<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<link rel="stylesheet" type="text/css" href="../static/easyui/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="../static/easyui/themes/icon.css">
<link rel="stylesheet" href="../static/css/style.css" />
<link rel="stylesheet" href="../static/css/tcommon.css" />
<script src="../static/jquery/jquery-1.12.4.js"></script>
<script src="../static/easyui/jquery.easyui.min.js"></script>
<script src="../static/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="../static/js/echarts.min.js"></script>
<title>压力记录</title>
</head>
<style>
	table td,table th{
		height:18px;
line-height:18px;
color:#333;
font-size:14px;
border:1px solid #eee
	}
</style>
<body style="text-align: center;">

	<div class="search-container" style="margin: 10px 0;">
		<div class="search-input">
			日期：
			<input class="easyui-datebox" id="date">
	</div>

	<table style="width: 95%; margin-left: 10px; margin-top: 5px;">
	    <thead>
		    <th>日期</th>
		    <th>泥浆/Mpa</th>
		    <th>旋转/Mpa</th>
		    <th>推拉/Mpa</th>
	    </thead>
	    	<tbody>
		    </tbody>
	</table>
</body>
<script th:inline="javascript">
    var equipmentid = [[${id}]];
    $(document).ready(function(){
    	var date = new Date();
    	$("#date").datebox("setValue",formatDate(date));
    });
    $('#date').datebox({
		onChange: function() {
			load()
		}
	});
    function load(){
    	var date = $("#date").datebox("getValue");
    	$.ajax({
			type : 'get',
			url : "../PressureCirlce?equipmentid=" + equipmentid+"&date="+date,
			contentType : "application/json",
			success : function(data) {
				var dates = [];
				var rotates = [];
				var pushs = [];
				var muds = [];
				$.each(data,function(i,arr){
					$.each(arr,function(j,row){
						dates.push(formatTime(row.date));
						rotates.push(row.rotate.toFixed(2));
						pushs.push(row.push.toFixed(2));
						muds.push(row.mud.toFixed(2));
					})
				})
				var tbody=document.querySelector("tbody");
				var rowNum=tbody.rows.length;
			    for (i=0;i<rowNum;i++)
			    {
			    	tbody.deleteRow(i);
			        rowNum=rowNum-1;
			        i=i-1;
			    } 
				    for(var i=0;i<dates.length;i++)
				    {
				        var tr=document.createElement("tr");
				        tbody.appendChild(tr);
				        for(var j = 0; j<4; j++) {
				        	if(j == 0) {
				        		var td=document.createElement("td");
					             tr.appendChild(td);
					             td.innerHTML=dates[i];
				        	} else if (j == 1) {
				        		var td=document.createElement("td");
					             tr.appendChild(td);
					             td.innerHTML=muds[i];
				        	} else if (j == 2) {
				        		var td=document.createElement("td");
					             tr.appendChild(td);
					             td.innerHTML=rotates[i];
				        	} else if (j == 3){
				        		var td=document.createElement("td");
					             tr.appendChild(td);
					             td.innerHTML=pushs[i];
				        	}
				        }
				    }
			},
			dataType : "json"
		});
    }
    function formatDate(time) {
		var date = new Date(time);
		var year = date.getFullYear(),month = date.getMonth() + 1, //月份是从0开始的
		day = date.getDate(),hour = date.getHours(),min = date.getMinutes(),sec = date.getSeconds();
		var newTime = year + '-' + month + '-' + day;
		return newTime;
	}
    
    function formatTime(time){
		if(time){
			return dateFormat("HH:MM:SS",new Date(time))
		}else{
			return '';
		}
	}
	function dateFormat(fmt, date) {
	    let ret;
	    let opt = {
	        "Y+": date.getFullYear().toString(),        // 年
	        "m+": (date.getMonth() + 1).toString(),     // 月
	        "d+": date.getDate().toString(),            // 日
	        "H+": date.getHours().toString(),           // 时
	        "M+": date.getMinutes().toString(),         // 分
	        "S+": date.getSeconds().toString()          // 秒
	        // 有其他格式化字符需求可以继续添加，必须转化成字符串
	    };
	    for (let k in opt) {
	        ret = new RegExp("(" + k + ")").exec(fmt);
	        if (ret) {
	            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (padStart(opt[k],ret[1].length, "0")))
	        };
	    };
	    return fmt;
	}
	function padStart(string,length,char){
		var str = string;
		for(var i=0;i<length-string.length;i++){
			str=char+str
		}
		return str
	}
</script>
</html>